
import { Card, Col, Layout, Row, Space } from "antd";
import { formItemList, IFormItem } from "../type";
import "./index.less";

const { Sider } = Layout;

interface IFormItemOverviewProps {
    addFormItem: (item: IFormItem) => void; // 添加表单项
}

const FormItemOverview = (props: IFormItemOverviewProps) => {
    const { addFormItem } = props;

    return <Sider width={400} className="page-sider">
        <div className="sider-header">
            <Space className="sider-title">
                选择表单组件
                <span className="v-divider"></span>
                <span className="common-tips">点击添加到右侧</span>
            </Space>
        </div>
        <div className="sider-box">
            <Row gutter={[16, 16]}>
                {
                    formItemList.map((item) => {
                        const { title, type, img } = item
                        return (
                            <Col span={12} key={type} className="form-item-sel-box">
                                <Card title={title} className="pointer" onClick={() => addFormItem(item)}>
                                    <img src={img} alt={title} />
                                </Card>
                            </Col>
                        )
                    })
                }
            </Row>
        </div>
    </Sider>
}

export default FormItemOverview
